@model MVCWeekOne.Models.LoginViewModel
@{
    ViewData["Title"] = "登录";
    Layout = null;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>IMES工厂 - 登录</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/layui@2.8.18/dist/css/layui.css" media="all">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            height: 100vh;
            display: flex;
            overflow: hidden;
        }

        .login-wrapper {
            display: flex;
            width: 100%;
            height: 100vh;
        }

        .left-section {
            flex: 1;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            position: relative;
            overflow: hidden;
        }

        .left-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.1)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.1)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
            opacity: 0.3;
        }

        .left-content {
            text-align: center;
            z-index: 2;
            position: relative;
        }

        .system-title {
            font-size: 48px;
            font-weight: bold;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }

        .system-subtitle {
            font-size: 24px;
            margin-bottom: 40px;
            opacity: 0.9;
        }

        .contact-info {
            position: absolute;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            z-index: 2;
        }

        .contact-title {
            font-size: 18px;
            margin-bottom: 10px;
            opacity: 0.9;
        }

        .qq-number {
            font-size: 24px;
            font-weight: bold;
            background: rgba(255, 255, 255, 0.2);
            padding: 10px 20px;
            border-radius: 25px;
            backdrop-filter: blur(10px);
        }

        .right-section {
            flex: 1;
            background: white;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 40px;
        }

        .login-form-container {
            width: 100%;
            max-width: 400px;
        }

        .login-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .login-title {
            font-size: 32px;
            color: #333;
            margin-bottom: 10px;
            font-weight: bold;
        }

        .login-subtitle {
            color: #666;
            font-size: 16px;
        }

        .form-group {
            margin-bottom: 25px;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-weight: 500;
            font-size: 14px;
        }

        .form-input {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid #e1e5e9;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s ease;
            background: #f8f9fa;
        }

        .form-input:focus {
            outline: none;
            border-color: #667eea;
            background: white;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .form-input::placeholder {
            color: #999;
        }

        .remember-section {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
        }

        .remember-me {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #666;
            font-size: 14px;
        }

        .remember-me input[type="checkbox"] {
            width: 16px;
            height: 16px;
            accent-color: #667eea;
        }

        .login-btn {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .login-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
        }

        .login-btn:active {
            transform: translateY(0);
        }

        .validation-error {
            color: #ff4757;
            font-size: 12px;
            margin-top: 5px;
            display: block;
        }

        .form-actions {
            margin-top: 20px;
        }

        .login-tip {
            text-align: center;
            color: #999;
            font-size: 12px;
            margin-top: 15px;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 6px;
        }

        /* 验证码样式 */
        .captcha-container {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .captcha-input {
            flex: 1;
            text-transform: uppercase;
        }

        .captcha-text {
            width: 120px;
            height: 40px;
            border: 2px solid #e1e5e9;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s ease;
            background: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: bold;
            font-family: 'Courier New', monospace;
            color: #333;
            user-select: none;
        }

        .captcha-text:hover {
            border-color: #667eea;
            background: #e8f0fe;
        }



        /* 响应式设计 */
        @@media (max-width: 768px) {
            .login-wrapper {
                flex-direction: column;
            }

            .left-section {
                flex: none;
                height: 200px;
            }

            .right-section {
                flex: 1;
                padding: 20px;
            }

            .system-title {
                font-size: 32px;
            }

            .system-subtitle {
                font-size: 18px;
            }

            .contact-info {
                position: relative;
                bottom: auto;
                left: auto;
                transform: none;
                margin-top: 20px;
            }
        }

        /* 加载动画 */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .loading-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid #667eea;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @@keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <!-- 加载遮罩 -->
    <div class="loading-overlay" id="loadingOverlay">
        <div class="loading-spinner"></div>
    </div>

    <div class="login-wrapper">
        <!-- 左侧蓝色背景区域 -->
        <div class="left-section">
            <div class="left-content">
                <div class="system-title">IMES工厂</div>
                <div class="system-subtitle">智能制造执行系统</div>
            </div>

            <div class="contact-info">
                <div class="contact-title">技术支持</div>
                <div class="qq-number">QQ: 2623933985</div>
            </div>
        </div>

        <!-- 右侧登录表单区域 -->
        <div class="right-section">
            <div class="login-form-container">
                <div class="login-header">
                    <div class="login-title">用户登录</div>
                    <div class="login-subtitle">请输入您的账号信息</div>
                </div>

                <form method="post" id="loginForm">
                    @Html.AntiForgeryToken()

                    <div class="form-group">
                        <label class="form-label">用户名</label>
                        @Html.TextBoxFor(m => m.Username, new { @class = "form-input", placeholder = "请输入用户名",
                        autocomplete = "username" })
                        @Html.ValidationMessageFor(m => m.Username, "", new { @class = "validation-error" })
                    </div>

                    <div class="form-group">
                        <label class="form-label">密码</label>
                        @Html.PasswordFor(m => m.Password, new { @class = "form-input", placeholder = "请输入密码",
                                                autocomplete = "current-password" })
                        @Html.ValidationMessageFor(m => m.Password, "", new { @class = "validation-error" })
                    </div>

                    <div class="form-group">
                        <label class="form-label">验证码</label>
                        <div class="captcha-container">
                            @Html.TextBoxFor(m => m.Captcha, new { @class = "form-input captcha-input", placeholder =
                                                        "请输入验证码", maxlength = "4" })
                            <div id="captchaText" class="captcha-text" onclick="refreshCaptcha()" title="点击刷新验证码"></div>
                        </div>
                        @Html.ValidationMessageFor(m => m.Captcha, "", new { @class = "validation-error" })
                    </div>

                    @if (!ViewData.ModelState.IsValid)
                    {
                        <div class="form-group">
                            <div class="validation-error">
                                @Html.ValidationSummary(true)
                            </div>
                        </div>
                    }

                    <div class="remember-section">
                        <div class="remember-me">
                            @Html.CheckBoxFor(m => m.RememberMe, new { id = "rememberMe" })
                            <label for="rememberMe">记住密码</label>
                        </div>
                    </div>

                    <div class="form-actions">
                        <button class="login-btn" type="submit">
                            登录系统
                        </button>
                        <div class="login-tip">
                            💡 提示：输入用户名和密码后，按回车键即可快速登录
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="https://unpkg.com/layui@2.8.18/dist/layui.js"></script>
    <script>
        // 生成随机验证码
        function generateCaptcha() {
            var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
            var captcha = '';
            for (var i = 0; i < 4; i++) {
                captcha += chars.charAt(Math.floor(Math.random() * chars.length));
            }
            return captcha;
        }

        // 验证码刷新函数 - 全局函数
        function refreshCaptcha() {
            console.log('开始刷新验证码');
            try {
                var captchaText = document.getElementById('captchaText');
                var captchaInput = document.getElementById('Captcha');

                if (captchaText) {
                    var newCaptcha = generateCaptcha();
                    captchaText.textContent = newCaptcha;
                    captchaText.style.opacity = '0.5';

                    setTimeout(function () {
                        captchaText.style.opacity = '1';
                    }, 100);

                    console.log('验证码刷新成功:', newCaptcha);
                }

                // 清空输入框并聚焦
                if (captchaInput) {
                    captchaInput.value = '';
                    captchaInput.focus();
                }
            } catch (e) {
                console.error('刷新验证码出错:', e);
            }
        }

        // 页面加载时初始化验证码
        window.onload = function () {
            refreshCaptcha();
        };

        layui.use(['form', 'layer'], function () {
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.$ || window.jQuery;

            // 页面加载时检查是否有保存的用户名和密码
            $(document).ready(function () {
                var savedUsername = localStorage.getItem('savedUsername');
                var savedPassword = localStorage.getItem('savedPassword');
                var rememberMe = localStorage.getItem('rememberMe');

                if (savedUsername && rememberMe === 'true') {
                    document.getElementById('Username').value = savedUsername;
                    document.getElementById('Password').value = savedPassword;
                    document.getElementById('rememberMe').checked = true;
                    form.render('checkbox');
                }
            });

            // 表单提交
            $('#loginForm').on('submit', function (e) {
                var rememberMe = document.getElementById('rememberMe').checked;
                var username = document.getElementById('Username').value;
                var password = document.getElementById('Password').value;

                // 显示加载动画
                document.getElementById('loadingOverlay').classList.add('show');

                // 如果选择记住密码，保存到localStorage
                if (rememberMe) {
                    localStorage.setItem('savedUsername', username);
                    localStorage.setItem('savedPassword', password);
                    localStorage.setItem('rememberMe', 'true');
                } else {
                    localStorage.removeItem('savedUsername');
                    localStorage.removeItem('savedPassword');
                    localStorage.removeItem('rememberMe');
                }

                // 模拟加载延迟
                setTimeout(function () {
                    document.getElementById('loadingOverlay').classList.remove('show');
                }, 2000);

                return true;
            });

            // 输入框焦点效果
            $('.form-input').on('focus', function () {
                $(this).parent().addClass('focused');
            }).on('blur', function () {
                $(this).parent().removeClass('focused');
            });

            // 统一的登录触发函数
            function trySubmitLogin() {
                var username = $('#Username').val().trim();
                var password = $('#Password').val().trim();

                if (!username) {
                    layer.msg('请输入用户名', { icon: 2 });
                    $('#Username').focus();
                    return;
                }
                if (!password) {
                    layer.msg('请输入密码', { icon: 2 });
                    $('#Password').focus();
                    return;
                }
                $('#loginForm').submit();
            }

            // 全局回车键：进入页面即可按回车登录
            $(document).on('keydown', function (e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    trySubmitLogin();
                }
            });

            // 为输入框添加回车键监听（冗余保障）
            $('#Username, #Password, #Captcha').on('keydown', function (e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    trySubmitLogin();
                }
            });
        });
    </script>
</body>

</html>